<template>
    <div class="comment">
        <div class="comm-top">
            <div class="ct-l">
                <image :src='data.workerAvatar' v-if='data.workerAvatar' class='cm-pho'></image>
                <image :src='defPho' v-else class='cm-pho'></image>
                <text class='cm-name'>{{data.workerName}}</text>
            </div>
            <text class='ct-r'>{{data.createTime}}</text>
        </div>
        <text class="cm-tit limit-three">{{data.title}}</text>
        <text class="cm-desc limit-four">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{data.content}}
        </text>
        <div class="social-status">
            <div class="see"  @click="zanClick">
                <text class="seeicon nativeplusfont stared" v-if='data.stared'>&#xe655;</text>
                <text class="seeicon nativeplusfont" v-else>&#xe655;</text>
                <text>{{data.starCount || 0}}</text>
            </div>
            <div class="love"  @click="caiClick">
                <text class="seeicon nativeplusfont stared" v-if='data.unstared'>&#xe657;</text>
                <text class="seeicon nativeplusfont" v-else>&#xe657;</text>
                <text>{{data.unstarCount || 0}}</text>
            </div>
            <!-- <div class="share">
                <text class="shareicon nativeplusfont">&#xe665;</text>
                <text>{{data.replyCount || 0}}</text>
            </div> -->
        </div>
    </div>
</template>
<script>
    const modal = weex.requireModule('modal');
    export default {
        props: ["data"],
        data: () => ({
               
               defPho:''
        }),
        created(){
            // this.data.workerAvatar = this.data.workerAvatar || this.data.defPho;
        },
        computed: {
        },
        methods: {
            zanClick(){
                let vm = this;
                var userInfo = this.$storage.getSync('UserInfo');
                this.token = userInfo.token;
                if(this.data.stared == 0){
                    //代表赞
                    this.data.stared = 1;
                    let id = this.data.id;
                    this.data.starCount = this.data.starCount || 0;
                    this.data.starCount +=1;
                    //获取石头币明细接口
                   
                    this.$fetch({
                        method: 'POST',    // 大写
                        name: 'answer.star', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                        data: {
                            "id":id ,
                        },
                        header: {
                            'X-TMACW-APP-Token': this.token
                        }
                    }).then(resData => {
                        // 成功回调
                        console.log(":::::::::::::::消息列表::::::::::::::::::::::")
                        console.log(resData)
                        if(resData && resData.errno == 0){
                            
                        } else {
                            this.$notice.toast({ message: resData.errmsg})
                        }
                    }, error => {
                    
                        this.$notice.toast({ message: "获取失败, 请重试"})
                    })
                }else{
                    //代表踩
                    this.data.stared = 0;
                    let id = this.data.id;
                    this.data.starCount = this.data.starCount || 0;
                    this.data.starCount -=1;
                    //获取石头币明细接口
                    this.$fetch({
                        method: 'POST',    // 大写
                        name: 'answer.starcancel', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                        data: {
                            "id":id ,
                        },
                        header: {
                            'X-TMACW-APP-Token': this.token
                        }
                    }).then(resData => {
                        // 成功回调
                        console.log(":::::::::::::::消息列表::::::::::::::::::::::")
                        console.log(resData)
                        if(resData && resData.errno == 0){
                            
                        } else {
                            this.$notice.toast({ message: resData.errmsg})
                        }
                    }, error => {
                    
                        this.$notice.toast({ message: "获取失败, 请重试"})
                    })
                }
            },
            caiClick(){
                let vm = this;
                var userInfo = this.$storage.getSync('UserInfo');
                this.token = userInfo.token;
                if(this.data.unstared == 0){
                    //代表赞
                    this.data.unstared = 1;
                    let id = this.data.id;
                    this.data.unstarCount = this.data.unstarCount || 0;
                    this.data.unstarCount +=1;
                    //获取石头币明细接口
                   
                    this.$fetch({
                        method: 'POST',    // 大写
                        name: 'answer.unstar', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                        data: {
                            "id":id ,
                        },
                        header: {
                            'X-TMACW-APP-Token': this.token
                        }
                    }).then(resData => {
                        // 成功回调
                        console.log(":::::::::::::::消息列表::::::::::::::::::::::")
                        console.log(resData)
                        if(resData && resData.errno == 0){
                            
                        } else {
                            this.$notice.toast({ message: resData.errmsg})
                        }
                    }, error => {
                    
                        this.$notice.toast({ message: "获取失败, 请重试"})
                    })
                }else{
                    //代表踩
                    this.data.unstared = 0;
                    let id = this.data.id;
                    this.data.unstarCount = this.data.unstarCount || 0;
                    this.data.unstarCount -=1;
                    //获取石头币明细接口
                    this.$fetch({
                        method: 'POST',    // 大写
                        name: 'answer.unstarcancel', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                        data: {
                            "id":id ,
                        },
                        header: {
                            'X-TMACW-APP-Token': this.token
                        }
                    }).then(resData => {
                        // 成功回调
                        console.log(":::::::::::::::消息列表::::::::::::::::::::::")
                        console.log(resData)
                        if(resData && resData.errno == 0){
                            
                        } else {
                            this.$notice.toast({ message: resData.errmsg})
                        }
                    }, error => {
                    
                        this.$notice.toast({ message: "获取失败, 请重试"})
                    })
                }
            },
            
            
        }
    }
</script>
<style lang="scss" scoped>
@import 'src/js/css/core/base.scss';

.iconfont {
    font-family: iconfont;
}
.nativeplusfont {
    font-family: nativeplusfont;
}
.wrapper {
    background-color: #F4F4F4;
    padding-bottom: 0;
    padding-top: 0;
    margin: 0;
    width: 750px;
    position:relative;
    /* background-color: #ff0 */
}

/*comment*/
.comment{
    backgroundColor:#fff;
    width:750px;
    padding-top:20px;
    padding-bottom:20px;
    padding-left:24px;
    padding-right:24px;
    margin-bottom:10px;
}
.comm-top{
    display:flex;
    flex-direction: row;
    align-items: center;
}
.ct-l{
    flex:1;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.ct-r{
    font-size:24px;
    color:#333;
}
.cm-pho{
    width:90px;
    height:90px;
    border-radius:80%;
    margin-right:10px;
}
.cm-name{
    font-size:32px;
    color:#333;
}
.cm-tit{
    margin-top:20px;
    font-size:32px;
    color:#000;
    font-weight:bold;
}
.cm-desc{
    margin-top:20px;
    font-size:32px;
    text-indent: 20px;
    margin-bottom:20px;
}
.social-status{
    display:flex;
    flex-direction: row;
    margin-top:20px;
}
.see{
    margin-left:112px;
    display:flex;
    flex-direction: row;
}
.seeicon,.loveicon,.shareicon{
    width:30px;
    height:40px;
    margin-right:5px;
    align-items: center;
}
.seeicon{
    width:40px;
}
.love{
    margin-left:136px;
    display:flex;
    flex-direction: row;
}
.share{
    margin-left:150px;
    display:flex;
    flex-direction: row;
}
/*comment*/

.total{
    color:#333;
    padding-top:20px;
    padding-bottom:20px;
    padding-left:24px;
    font-size:24px
}
.stared{
    color:red;
}
</style>